<template>
  <div class="container">
    <div class="leftBox">
      <div class="toolBox">
        <el-button
          icon="el-icon-plus"
          type="primary"
          :disabled="userAuthority == 1"
          @click="businessDialog.visible = true"
        >
          新增
        </el-button>
        <el-button
          icon="el-icon-delete"
          type="danger"
          :disabled="userAuthority == 1"
          @click="handleactionDialogVisible('预选删除业务系统节点')"
        >
          删除
        </el-button>
        <el-button
          icon="el-icon-plus"
          type="primary"
          :disabled="userAuthority == 1"
          @click="handleactionDialogVisible('预选编辑业务系统节点')"
        >
          编辑
        </el-button>
        <div style="display: inline">
          <p style="display: inline; margin-left: 15px">选择业务系统节点：</p>
          <el-select
            v-model="businessCardActivate"
            filterable
            @change="InitBusinessNode(businessCardActivate)"
            ref="select"
          >
            <el-option
              v-for="item in BusinessData"
              :key="item.BID"
              :label="item.NAME"
              :value="item.BID"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <V-BusinessNode :CountData="CountData" :SERVICESNAMEColumns="SERVICESNAMEColumns"></V-BusinessNode>
    </div>

    <!-- 弹窗：新增、编辑 -->
    <el-dialog
      title=""
      :visible.sync="businessDialog.visible"
      width="30%"
      @close="handleClose"
    >
      <el-form :model="businessDialog.form" label-width="120px">
        <el-form-item label="业务系统名称">
          <el-input
            v-if="businessDialog.form.opera != businessDialog.opera_Modify"
            v-model="businessDialog.form.data[0].NAME"
            @keyup.enter.native="handleClick('createNewBusiness')"
          ></el-input>
          <el-input
            v-if="businessDialog.form.opera == businessDialog.opera_Modify"
            v-model="businessDialog.form.data[0].NAME"
            @keyup.enter.native="handleClick('editBusinessSave')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="businessDialog.visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleClick('createNewBusiness')"
          v-if="businessDialog.form.opera != businessDialog.opera_Modify"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="handleClick('editBusinessSave')"
          v-if="businessDialog.form.opera == businessDialog.opera_Modify"
          >保 存</el-button
        >
      </div>
    </el-dialog>
    <!-- 弹窗：删除、编辑 预选弹窗 -->
    <el-dialog
      :title="actionDialogVisibleTitle"
      :visible.sync="actionDialogVisible"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="actionItem">
        <div v-for="item in BusinessData" :key="item.BID">
          <el-radio
            v-model="Useless"
            @click.native="handleClick('businessCard', item.BID)"
            :label="item.BID"
            border
            >{{ item.NAME }}</el-radio
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ascertainDialogClose">取 消</el-button>
        <el-button
          type="primary"
          v-show="Useless != 'all'"
          :disabled="
            businessCardActivate == '0' && businessCardActivate == 'all'
          "
          @click="ascertainDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  submitAdmin,
  getBusinessNode,
  getBusinessServicesname,
} from "@/api/index.js";
import tableColumns from "./BusinessColumns";
import vDialog from "./businessDialog";
import vPagination from "common/Pagination.vue";
import { getUserData } from "@/utils/IndexedDB.js";
import VBusinessNode from "./components/BusinessNode.vue";
export default {
  name: "mgBusiness",
  components: {
    vDialog,
    vPagination,
    VBusinessNode,
  },
  data() {
    return {
      postData: {
        opera: "",
        curPage: 1,
        pageSize: 10000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "exactquery", // 精确查询
        filters: {},
      },
      dataTotal: 100,
      tableColumns: tableColumns,
      dialogVisibles: false,
      dialogVisibleEdits: false,

      dialogData: {
        SERVICESNAME: "",
        SUPPORT: "",
        REMARK: "",
        ID: "",
        CREATEDATE: "",
      },
      actionDialogVisible: false,
      actionDialogVisibleTitle: "",

      actionDialogType: {
        ["预选编辑业务系统节点"]: "createNewBusiness",
        ["预选编辑业务系统节点"]: "editBusiness",
        ["预选删除业务系统节点"]: "deleteBusiness",
      },
      business: {
        get_opera: "GetServicesName",
        del_opera: "DeleteServicesName",
        filters: {
          NAME: "",
        },
        loading: false,
        data: [],
      },
      businessCardActivate: "",
      businessCardHover: {},
      businessDialog: {
        opera_Create: "CreateServicesName",
        opera_Modify: "ModifyServicesName",
        visible: false,
        form: {
          opera: "",
          data: [
            {
              NAME: "",
              TYPE: "测试分类", // Database、Host、All
            },
          ],
        },
      },
      userAuthority: "",
      selectBusiness: "",
      CountData: {},
      Useless: "0",
      SERVICESNAMEColumns: {},
    };
  },
  created() {
    this.getBusinessData();
    // 选中默认
    this.businessCardActivate = "all";
    this.$watch(
      () => this.businessDialog.form.data[0].NAME,
      function (n, o) {
        if (n == "全部") {
          this.$message.error("禁止添加业务系统名<全部>");
          this.businessDialog.form.data[0].NAME = "";
        }
      }
    );
  },
  computed: {
    BusinessData() {
      return this.business.data.filter((d) => {
        return d.NAME.includes(this.selectBusiness);
      });
    },
  },
  mounted() {
    this.$refs.select.$el.onpaste = () => {
      // this.$message.error('禁止操作')
      return false;
    };
  },
  methods: {
    async getBusinessData() {
      await getBusinessServicesname().then((_) => {
        this.SERVICESNAMEColumns = _;
      });
      await getUserData("userBase", "infoBase", 0).then((res) => {
        this.userType = res.ms_type;
        this.power = res.power;
        this.userAuthority = res.userAuthority;
        this.userEndTime = res.endTime;
      });
      this.business.loading = true;

      this.postData.opera = this.business.get_opera;
      this.postData.filters = this.business.filters;
      submitAdmin({
        postData: JSON.stringify(this.postData),
      }).then((res) => {
        res.data.push({
          BID: "all",
          NAME: "全部",
          TYPE: "测试分类",
        });
        this.business.data = res.data;
        this.InitBusinessNode(this.businessCardActivate);
        this.business.loading = false;
      });
    },
    // 鼠标点击
    handleClick(flag, data) {
      let _this = this;
      let _run = {
        createNewBusiness: function () {
          _this.businessDialog.form.opera = _this.businessDialog.opera_Create;
          _this.submitBusinessData();
        },
        editBusiness: function () {
          _this.businessDialog.form.opera = _this.businessDialog.opera_Modify;
          _this.businessDialog.form.data[0].NAME = data.NAME;
          _this.businessDialog.visible = true;
        },
        editBusinessSave: function () {
          _this.submitBusinessData(_this.businessCardActivate);
        },
        businessCard: function () {
          _this.businessCardActivate = data;
        },
        deleteBusiness: function () {
          _this.submitDeleteBusiness();
        },
      };
      // 执行匹配的函数
      _run[flag]();
    },
    // 鼠标移入
    handleMouseEnter(box, key) {
      if (this.businessCardHover.hasOwnProperty(key)) {
        this.businessCardHover[key] = true;
      } else {
        /**
         * 对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。
         * 可以用 set 添加响应式 property
         */
        this.$set(this.businessCardHover, key, true);
      }
    },
    // 鼠标移出
    handleMouseLeave(box, item) {
      this.businessCardHover[item] = false;
    },
    submitBusinessData(bid) {
      let _postData = this.businessDialog.form;
      if (bid) {
        _postData.data[0].BID = bid;
      }

      submitAdmin({
        postData: JSON.stringify(_postData),
      }).then((res) => {
        if (res.includes("成功")) {
          this.$message({
            message: res,
            type: "success",
          });

          this.getBusinessData();
          this.businessDialog.visible = false;
        } else {
          this.$message({
            message: res,
            type: "error",
          });
        }
      });
    },
    businessCardShadow(businessBID) {
      if (businessBID == this.businessCardActivate) {
        return "always";
      } else {
        return "hover";
      }
    },
    businessCardClass(businessBID) {
      if (businessBID == this.businessCardActivate) {
        return "businessCardBG";
      } else {
        return "";
      }
    },
    handleClose() {
      this.businessDialog.form = this.$options.data().businessDialog.form;
    },
    submitDeleteBusiness() {
      this.$confirm("此操作将永久删除选中业务系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.businessCardActivate == "0") {
            this.$message({
              message: "非法操作，禁止删除默认业务系统！",
              type: "error",
            });
          } else {
            let _data = {
              opera: this.business.del_opera,
              bid: this.businessCardActivate,
            };

            submitAdmin({
              postData: JSON.stringify(_data),
            }).then((res) => {
              if (res == "删除成功") {
                this.$message({
                  message: "删除成功！",
                  type: "success",
                });

                this.getBusinessData();
                // 选中默认
                this.businessCardActivate = "0";
              } else {
                this.$message({
                  message: "删除失败，请重试！",
                  type: "error",
                });
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    dialogCloseAdd() {
      this.dialogVisibles = false;
    },
    dialogCloseEdit() {
      this.dialogVisibleEdits = false;
    },
    tableEdit(row) {
      (this.dialogVisibleEdits = true), (this.dialogData = row);
    },
    tableDelect(id) {
      this.$confirm("确定删除？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    dialogOpen() {
      this.dialogVisibles = true;
    },

    handleactionDialogVisible(name) {
      this.actionDialogVisibleTitle = name;
      this.actionDialogVisible = true;
    },
    ascertainDialog() {
      let item = this.BusinessData.filter((_) => {
        return _.BID == this.Useless;
      });
      this.handleClick(
        this.actionDialogType[this.actionDialogVisibleTitle],
        item[0]
      );
      this.actionDialogVisible = false;
      this.Useless = "0";
    },
    ascertainDialogClose() {
      this.Useless = "0";
      this.actionDialogVisible = false;
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;

      this.getBusinessData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getBusinessData();
    },
    InitBusinessNode(data) {
      let ActivateItem = this.business.data.filter((item) => {
        return item.BID === data;
      });

      if (ActivateItem.length > 0) {
        getBusinessNode({ system: ActivateItem[0].NAME }).then((res) => {
          if (res) {
            this.CountData = res;
            this.$message.success("获取成功");
          } else {
            this.CountData = {};
            this.$message.error("获取业务系统节点错误");
          }
        });
      }
    },
  },
  watch: {
    businessCardActivate: function (Newval, oldval) {
      // this.InitBusinessNode(Newval);
    },
    Useless: function (n, o) {
      if (n == "all") {
        this.$message.error("禁止选择<全部>业务系统节点");
        this.Useless = "0";
      }
    },
  },
};
</script>

<style scoped>
.leftBox {
  margin-bottom: 15px;
}
.actionItem {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.actionItem > div {
  margin: 15px;
}
</style>
